<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    	<script src="__static__/js/jquery.js"></script>
    	
        <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
        <script src="https://vjs.zencdn.net/7.0.3/video.js"></script>
        <title>{$pageTitle|default='TA的直播间'}</title>
        <style>
            html{-webkit-overflow-scrolling: touch;}
            body,html{
                height:100%;
                font-size: 16px; 
            }
            *:focus {outline: none;}
            body{
                background-color: #F2F2F2;
                /*max-width: 480px;*/
                width: 100%;
                margin: 0 auto;
                padding: 0;
            }
            li {list-style-type:none;margin:0px;}
            a {
              color: #000;
              text-decoration: none;
            }
            a:active{
                text-decoration: none;
            }
            .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
            .clearfix{*+height:1%;}
            .list{
                padding: 1rem 1rem 0 0;
                margin: 0;
            }
            .endPlay{
                background-color: #000;
                text-align: center;
                padding: 25% 0 0 0;
                width: 100%;
                position: relative;
            }
            .endPlay .endPlay-text{
                font-size:18px;
                color: #999;
                padding: 8% 0 16% 0;
            }
            .app{
                position: absolute;
                top: 0;
                padding: 3%;
                width: 94%;
                max-width: 94%;
                background-color: #000;
                z-index:999;
            }
            .app>div{
                float:left;
                color:#FFF;
            }
            .app .app-logo{
                background: url('{$deskicon_ico}') no-repeat;
                background-size: 100%;
                width: 50px;
                height: 50px;
                border-radius: 8px;
            }
            .app .app-title{
                padding: 5px 0;
                margin-left: 1rem;
                text-align: left;
            }
            .app .app-version{
                font-size: 14px;
            }
            .app .app-down{
                width: 35px;
                height: 10px;
                background-color: #0096E6;
                padding: 1rem;
                border-radius: 5px;
                text-align: center;
                line-height: 10px;
                color:#fff;
                white-space:nowrap;
            }
            .list-item{
                width: calc((100% - 1rem*2)/2);
                overflow: hidden;
                float: left;
                margin: 0 0 1rem 1rem;
            }
            .list-item .list-item-icon{
                width:100%;
            }
            .list-item .list-item-title{
                height: 50px;
                background: #FFF;
                position: relative;
            }
            .list-item .list-item-title .title-avatar{
                background: #FFF;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                border: 1px solid #FFF;
                display: block;
                position: absolute;
                top: -16px;
                overflow: hidden;
                left: 1rem;
            }
            .list-item .list-item-title .title-uname{
                display: block;
                float: right;
                margin: 6px 18px 0 0;
                width: calc(100%/2);
                overflow: overlay;
                text-overflow: ellipsis;
                text-align: left;
                white-space: nowrap;
            }
            .list-item-name{
                width: 100%;
                overflow: overlay;
                text-overflow: ellipsis;
                text-align: left;
                position: absolute;
                white-space: nowrap;
                top: -42px;
                padding: 5px;
                filter:alpha(opacity=100);
                -moz-opacity:1;
                -khtml-opacity:1;
                opacity: 1;
                color:#FFF;
            }
            .hot{
                background-color: #FFF;
                padding: 20px;
                margin: 0;
                color:#333;
            }
            .startPlay{
                text-align: center;
                padding: 0;
                width: 100%;
                position: relative;
                overflow: hidden;
                height: 100%;
            }
            .opa{
                background-color: rgba(0,0,0,0.6);
            }
            .video_bg{
                width: 100%;
                height: 100%;
                position: absolute;
                top:0;
                background-color: #000;
            }
            .video_bg>div{
                width: 100%;
                height: 100%
            }
            .video_bg>div.shop {
                position: absolute;
                width: 100%;
                left: 0;
                bottom: 4%;
                height: 23%;
                border-radius: 0;
                background: #000;
                z-index: 15;
                word-break: break-all;
            }
            .video_bg>div.shop>div.shop-box {
                display: flex;
                height: 54%;
                min-height: 100px;
                border-radius: 8px;
                overflow: hidden;
                margin: 5% 4%;
                background: #1a1a1a;
            }
            .shop .shop-logo{
                position: relative;
                overflow: hidden;
                height: 100%;
                width: 22vh;
            }
            .shop .shop-logo img {
                width: 100%;
                height: 100%;
                background: rgba(249,107,78,1);
                border-radius: 0;
                position: absolute;
                left: 0;
                top: 0;
                object-fit: cover;
            }
            .shop .shop-con {
                padding: 2.5% 2.2%;
                width: 100%;
            }
            .shop .shop-name {
                width: calc(100% - 8px);
                max-height: 40px;
                padding: 4px 4px 0;
                font-size: 15px;
                font-weight: 400;
                text-align: left;
                color: #fff;
                line-height: 20px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .shop .shop-b{
                height: 30px;
                padding: 0 4px 4px;
                display: block;
                margin-top: 7px;
            }
            .shop .shop-b span.s-l{
                text-align: left;
                font-size: 18px;
                font-weight: 600;
                color: #FE4444;
                line-height: 30px;
                float: left;
            }
            .shop .shop-b span.s-r{
                width: 70px;
                height: 30px;
                opacity: 1;
                background: #0095e5;
                border-radius: 2px;
                font-size: 14px;
                font-weight: 400;
                color: #ffffff;
                line-height: 30px;
                float: right;
            }

            
            .video_bg video{
                position: absolute;
                left: 0;
                width: 100%;
            }
            .video_bg .bg{
                background: url('{$video.video_icon}');
            }
            .video_bg .bg-blur{
                float: left;
                width: 100%;
                height: 70%;
                background-repeat: no-repeat;
                background-position: center;
                background-size: cover;
                -webkit-filter: blur(15px);
                -moz-filter: blur(15px);
                -o-filter: blur(15px);
                -ms-filter: blur(15px);
                filter: blur(15px);
            }
        </style>
    
    </head>
    <body>
        {present name="data"}
            <div class="startPlay">
                <div class="app clearfix opa">
                    <div class="app-logo"></div>
                    <div class="app-title">{$config.app_desc}<br /><span class="app-version">版本:{$config.app_version}</span></div>
                    <a style="display:block;float:right;" href="{$config.app_down_url}" target="_blank" ><div class="app-down">下载</div></a>
                </div>
                <div class="video_bg">
                    <div class="bg bg-blur"></div>
                    <!-- <video id="video" autoplay="true" preload="true" poster="{$video_icon}"  controls="true" <?php if(is_weixin() && is_android()) {echo 'x5-video-player-type="h5"';}?> playsinline webkit-playsinline>
                        <source src="{$data.playurls.hls}" type="application/x-mpegURL" />
                    </video> -->
                    <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" muted controls autoplay  preload="auto" data-setup='{}' <?php if(is_weixin() && is_android()) {echo 'x5-video-player-type="h5"';}?> playsinline webkit-playsinline>
                        <source id="source" src="{$data.playurls.hls}"  type="application/x-mpegURL">
                    </video>
                    {notempty name="shop"}
                    <div class="shop">
                        <div class="shop-box">
                            <a href="{$shop['shop_link']}" class="shop-logo"><img src="{$shop['shop_cover']->scalar}" alt="{$shop['shop_name']}"></a>
                            <div class="shop-con">
                                <a href="{$shop['shop_link']}" class="shop-name">{$shop['shop_name']}</a>
                                <a href="{$shop['shop_link']}" class="shop-b">
                                    <span class="s-l">{$shop['shop_price'] ? ('¥'.$shop['shop_price']) : ''}</span>
                                    <span class="s-r">购买</span>
                                </a>
                            </div>
                        </div>
                    </div>
                    {/notempty}
                </div>
            </div>
        {else /}
            <div class="endPlay">
                <div class="app clearfix">
                    <div class="app-logo"></div>
                    <div class="app-title">{$config.app_desc}<br /><span class="app-version">版本:{$config.app_version}</span></div>
                    <a style="display:block;float:right;" href="{$config.app_down_url}" target="_blank" ><div class="app-down">下载</div></a>
                </div>
                <div class="endPlay-text">{$config.stream_not_start}</div>
            </div>
        {/present}
        {notempty name="list"}
            <p class="hot">热门推荐</p>
            <div>
                <ul class="clearfix list">
                    {volist name="list" id="vo"}
                    <li class="list-item">
                        <a href="/api?api=ZBCloud_Show_Stream&usid={$vo.user.usid}" style="display: block;position: relative;">
                            <div class="list-item-icon">
                                <img width="100%" src="{$vo.stream.icon[0]}?imageMogr2/thumbnail/180x250" />
                            </div>
                            <div class="list-item-title" style="height: 0;">
                                <div class="list-item-name">{$vo.stream.title}</div>
                                <!--<span class="title-avatar"><img width="100%" src="/" /></span>-->
                                <span class="title-uname">{$vo.user.uname}</span>
                            </div>
                        </a>
                    </li>
                    
                    
                    {/volist}
                </ul>
                
            </div>
        {else /}
            <div>
                <div style="background: #FFF;padding: 2rem;">暂无推荐</div>
            </div>
        {/notempty}
    </body>
    <script>
        $(function(){
            $(".list-item").each(function(){
               $(this).find(".list-item-icon").height($(this).width());
            });
            var poster          = $('video').attr('poster');
            var body_width      = $('body').width();
            var body_height     = $('body').height();
            $('video').attr('width',body_width);
            $('video').attr('height',  body_height);
            $('video').attr('poster',poster + '?imageMogr2/thumbnail/' + body_width + 'x' + body_height);
          
        });
    </script>
</html>

